import React, {Component} from 'react';
import {
  StyleSheet, View, Text, Keyboard,
  Image, StatusBar, BackHandler,
  KeyboardAvoidingView, DeviceEventEmitter,
  TextInput
} from 'react-native';
import Divide from '../../components/Divide';
import { BlueGradientButton } from '../../components/GradientButton';
import {Actions} from 'react-native-router-flux';
import RNExitApp from 'react-native-exit-app';
import LoadingUtil from '../../utils/LoadingUtil';
import {Px2Dp, FontSize} from '../../utils/Tool';
import ToastUtil from '../../utils/ToastUtil';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      account: '',
      password: '',
      errorTip: '',
      userNameFocus: false,
      pwdFocus: false
    };
    this.exitTime = 0;
  }

  async componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backHandle);

  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.backHandle);
  }

  backHandle = () => {
    if (Date.now() - this.exitTime > 2000) {
      ToastUtil.showShort('再按一次退出程序');
      this.exitTime = Date.now();
      return true;
    }
    RNExitApp.exitApp();
    return true;
  }

  onLogin = async () => {
    console.log(888)
    try {
      const {account, password} = this.state;
     /*if (!account) {
        this.setState({errorTip: '账户名不能为空'});
        return;
      }*/
      /* if (!password) {
        this.setState({errorTip: '密码不能为空'});
        return;
      }*/
      // LoadingUtil.showNetLoading();
      /*let rsp = await adminLogin(account, MD5.MD5_LOWER(password));
      await PreferenceUtil.setCookie(rsp.data.cookie);
      await Storage.set(Prefs.USER_DATA_KEY, rsp.data.user);
      await Storage.set(Prefs.USER_PERMISSION, rsp.data.permissions);
      await Storage.set(Prefs.USER_MODULES, rsp.data.modules);
      rsp = await reportInfo();*/
      Actions.main();
    } catch (error) {
      //empty
    }
    // LoadingUtil.dismissLoading();
  }


  renderLoginUI = () => {
    const {account, password, errorTip} = this.state;
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content"/>
        <View style={styles.logoView}>
          <Image style={styles.logo} source={require('../../images/logo.png')} resizeMode="contain"/>
          <Text style={styles.logoFont}>智慧监理</Text>
        </View>
        <View style={styles.inputContainer}>
          <Image
            style={styles.icon}
            source={require('../../images/user.png')}
          />
          <View style={styles.inputView}>
            <TextInput
              style={styles.input}
              value={account}
              placeholder="请输入用户名"
              autoCapitalize="none"
              placeholderTextColor="#C7C7C7"
              underlineColorAndroid="transparent"
              onChangeText={(text) => {
                this.setState({account: text});
              }}
            />
          </View>
        </View>
        <View style={styles.divid}>
          <Divide width={Px2Dp(2)} color="#E5E5E5"/>
        </View>
        <View style={styles.inputContainer}>
          <Image
            style={styles.icon}
            source={require('../../images/password.png')}
          />
          <View style={styles.inputView}>
            <TextInput
              style={styles.input}
              secureTextEntry
              value={password}
              placeholder="请输入密码"
              placeholderTextColor="#C7C7C7"
              underlineColorAndroid="transparent"
              onChangeText={(text) => {
                this.setState({password: text});
              }}
            />
          </View>
        </View>
        <View style={styles.divid}>
          <Divide width={Px2Dp(2)} color="#E5E5E5"/>
        </View>
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>{errorTip}</Text>
        </View>
        <BlueGradientButton style={styles.btnLogin} onPress={this.onLogin}>
          登录
        </BlueGradientButton>
        {/* <BlueGradientButton
          style={[styles.btnLogin,{marginTop:Px2Dp(40)}]} onPress={this.onChangeUrl}>
          切换url
        </BlueGradientButton> */}
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        {
          this.renderLoginUI()
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f2f5',
  },
  logoView: {
    alignItems: 'center',
    marginTop: Px2Dp(88),
    marginBottom: Px2Dp(48),
  },
  logo: {
    marginBottom: Px2Dp(4),
  },
  logoFont: {
    fontSize: FontSize(40),
    color: '#8C8C8C',
    fontWeight: 'bold',
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: Px2Dp(56),
    marginRight: Px2Dp(48),
    marginTop: Px2Dp(72),
  },
  icon: {
    width: Px2Dp(32),
    height: Px2Dp(32),
    marginRight: Px2Dp(36),
    marginBottom: Px2Dp(3),
  },
  inputView: {
    flex: 1,
    justifyContent: 'center',
    marginBottom: Px2Dp(3),
  },
  input: {
    color: '#262626',
    fontSize: Px2Dp(32),
  },
  divid: {
    marginLeft: Px2Dp(48),
    marginRight: Px2Dp(48),
  },
  errorContainer: {
    marginLeft: Px2Dp(48),
    height: Px2Dp(96),
  },
  errorText: {
    marginTop: Px2Dp(42),
    fontSize: Px2Dp(28),
    color: '#E64340',
  },
  btnLogin: {
    marginLeft: Px2Dp(48),
    marginRight: Px2Dp(48),
    height: Px2Dp(88),
  },
});

export default Login;
